<template>
	<view class="recommed">
		<banner :imgList="imgList"></banner>
		<view class="info">
			<view class="ele" v-for="(item,index) in policyDescList" :key="index">
				<image class="icon" :src="item.icon" mode=""></image>
				<text class="ele-text">{{item.desc}}</text>
			</view>
		</view>


		<view class="nav">
			<view class="nav-item" v-for="(item,index) in navList" :key="index" @click="goPage(item)">
				<image class="item-icon" :src="item.picUrl" mode=""></image>
				<text class="item-text">{{item.text}}</text>
			</view>
		</view>

		<view class="category" v-for="(item,index) in categoryModule" :key="index">
			<image class="category-show" :src="item.titlePicUrl"></image>
			<scroll-view class="category-list" scroll-x="true" enable-flex="true">
				<view class="category-item" v-for="itemlist in item.itemList" :key="itemlist.id">
					<image class="pic" :src="itemlist.showPicUrl"></image>
					<text class="title">{{itemlist.name}}</text>
				</view>
				<view class="category-item last">
					查看更多>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import base from '@/utils/base.js'
	import request from '@/utils/request.js'
	import banner from './banner.vue'
	export default {
		data() {
			return {
				imgList: []
			}
		},
		props: {
			policyDescList: {
				type: Array,
				default: []
			},
			navList: {
				type: Array,
				default: []
			},
			categoryModule: {
				type: Array,
				default: []
			},
		},
		created() {
			this.getBanner()
		},
		methods: {
			async getBanner() {
				let res = await request(base.indexBanner)
				console.log('轮播', res);
				this.imgList = res
			},
			goPage(item) {
				uni.navigateTo({
					url: '/pages/catePage/catePage?url=' + item.schemeUrl
				})
			}
		},
		components: {
			banner
		}
	}
</script>

<style lang="scss" scoped>
	.info {
		height: 70rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.ele {
			display: flex;

			.icon {
				width: 60rpx;
				height: 60rpx;
			}

			.ele-text {
				font-size: 20rpx;
				height: 70rpx;
				line-height: 70rpx;
			}
		}
	}



	.nav {

		display: flex;
		flex-wrap: wrap;

		.nav-item {
			width: 20%;
			display: flex;
			flex-direction: column;
			align-items: center;

			.item-icon {
				width: 100rpx;
				height: 100rpx;
			}

			.item-text {
				font-size: 20rpx;
			}
		}
	}

	.category {
		margin: 5rpx 0;
	}

	// 第一张图片
	.category-show {
		width: 100%;
		height: 370rpx;
	}

	//滚动区域
	.category-list {
		display: flex;
		height: 300rpx;
	}

	//每一个item项目
	.category-item {
		width: 200rpx;
		text-align: center;
		flex-shrink: 0;
		margin: 0 6rpx;
	}

	//最后一个item
	.last {
		width: 200rpx;
		height: 200rpx;
		background-color: #eee;
		font-size: 28rpx;
		text-align: center;
		line-height: 200rpx;
	}

	.pic {
		width: 200rpx;
		height: 200rpx;
		background-color: #eee;
	}
.title {
  font-size: 26rpx;
  white-space: pre-wrap;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

	.test {
		font-size: 0;
	}
</style>